<template>
  <el-dialog title="支部评定结果详情" v-model="openOrgReview" width="59%" append-to-body>
      <div class="dialog-top-line"></div>
      <el-form :model="queryOrgReview" ref="queryOrgEvalRef" :inline="true" label-width="109px">
        <div style="margin: 10px; display: flex; justify-content: space-between;">
            <div style="width: 50%">
            <el-form-item label="所属党组织" prop="reviewedUserDept" style="width: 100%;">
              <el-tree-select
                v-model="queryOrgReview.reviewedUserDept"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="请选择所属党组织"
                check-strictly
                style="width: 100%"
              />
            </el-form-item>
            </div>
            <div class="top-right-btn" :style="style">
            <el-row>
                <el-button icon="Refresh" @click="resetOrgEvalQuery">重置</el-button>
                <el-button type="danger" icon="Search" @click="handleOrgEvalQuery">查询</el-button>
            </el-row>
            </div>
        </div>
      </el-form>
      <el-table v-loading="loading" :data="orgReviewList" @selection-change="handleSelectionChange">
        <el-table-column label="姓名" align="center" prop="reviewedUserName" width="150"/>
        <el-table-column label="所属组织" align="center" prop="reviewedUserDeptName" min-width="150"/>
        <el-table-column label="支部评定结果" align="center" prop="grade" width="150">
          <template #default="scope">
            <span v-if="scope.row.grade === 5">优秀</span>
            <span v-else-if="scope.row.grade === 4">合格</span>
            <span v-else-if="scope.row.grade === 3">基本合格</span>            
            <span v-else-if="scope.row.grade === 2">不合格</span>
            <span v-else-if="scope.row.grade === 1">不定等次</span>
            <span v-else-if="scope.row.grade === 0">不了解</span>
            <span v-else>&nbsp;</span>
          </template>
        </el-table-column>
        <el-table-column label="支部评定情况" align="center">
          <el-table-column label="优秀" align="center" prop="grade5" width="90"/>
          <el-table-column label="合格" align="center" prop="grade4" width="90"/>
          <el-table-column label="基本合格" align="center" prop="grade3" width="90"/>
          <el-table-column label="不合格" align="center" prop="grade2" width="90"/>
          <el-table-column label="不定等次" align="center" prop="grade1" width="90"/>
          <el-table-column label="不了解" align="center" prop="grade0" width="90"/>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="90">
          <template #default="scope">
            <el-button @click="openOrgReviewResult(scope.row)" v-if="scope.row.grade === null">评定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: relative;right: 0px;">
        <pagination
          v-show="orgReviewTotal>0"
          :total="orgReviewTotal"
          v-model:page="queryOrgReview.pageNum"
          v-model:limit="queryOrgReview.pageSize"
          @pagination="getOrgReviewList"
        />
      </div>
      <div class="dialog-bottom-line"></div>
      <template #footer>
        <div class="dialog-footer" style="margin-top: 39px;">
          <el-button @click="cancelOrgReview">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <org-review-result ref="orgReviewResultRef" @callBack="getOrgReviewList"/>
</template>

<script setup>
import { listStat } from "@/api/partybuilding/Review";
import { listOrg } from "@/api/partybuilding/Org";
import OrgReviewResult from './OrgReviewResult.vue'
const emit = defineEmits(['callBack']);
const { proxy } = getCurrentInstance();
const openOrgReview = ref(false);
const orgReviewList = ref([]);
const orgReviewTotal = ref(0);
const orgReviewResultRef = ref(null);
const deptOptions = ref(undefined);
const data = reactive({
  queryOrgReview: {
    pageNum: 1,
    pageSize: 10,
    reviewId: null,
    reviewedUserDept: null
  },
});
const { queryOrgReview } = toRefs(data);

// 外部调用方法---显示支部评定弹窗
const showOrgEvalDlg = (reviewId) => {
  queryOrgReview.value.reviewId = reviewId;
  getOrgReviewList();
  openOrgReview.value = true;
};

defineExpose({
  showOrgEvalDlg
});

// 查询支部评定列表
function getOrgReviewList() {
  listStat(queryOrgReview.value).then(response => {
    orgReviewList.value = response.data;
    orgReviewTotal.value = response.total;
  });
}

// 关闭支部评定弹窗
function cancelOrgReview() {
  openOrgReview.value = false;
  emit('callBack', null);
}

// 搜索支部评定
function handleOrgEvalQuery() {
  getOrgReviewList();
}

// 重置支部评定查询条件
function resetOrgEvalQuery() {
  proxy.resetForm("queryOrgEvalRef");
  handleOrgEvalQuery();
}

// 打开评定结果弹窗
function openOrgReviewResult(row) {
  proxy.$refs.orgReviewResultRef.showOrgResult(row);
}

/** 查询部门下拉树结构 */
function getDeptTree() {
  listOrg().then(response => {
    deptOptions.value = proxy.handleTree(response.rows, "deptId");
  });
};

getDeptTree()
</script>
<style lang="scss" scoped>
.spanUserTitle {
  height: 22px;
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-Regular;
}
.itemTogetherTitle {
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-Regular;
    color: rgb(153, 153, 153) !important;
    padding: 19px 59px;
}
.dialog-top-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  top: 49px;
}
.dialog-bottom-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  bottom: 65px;
}
</style>